<template>
    <div class="attachment-root">
        <a v-if="href" @click="$oss.downAndOpen(href)" style="display: flex;align-items: center">
            <img style="width: 32px;height:32px;" :src="downloadIcon" alt="下载附件简历"/>
            <div style="width: fit-content;display: flex;">{{msg}}</div>
        </a>
        <p v-if="!href">{{msg}}</p>
    </div>
</template>

<script>
  import _g from '../../../assets/utils/global'

  export default {
    name: 'attachment',
    props: {
      jrrId: {
        type: Number,
        default: 0
      }
    },
    watch: {
      jrrId: {
        immediate: true,
        handler(n) {
          console.log('start load attachment')
          this.msg = '检索中'
          this.loadAttachment(n)
        }
      }
    },
    data() {
      return {
        downloadIcon: require('@/assets/img/communication/download.png'),
        href: null,
        msg: '检索中'
      }
    },
    methods: {
      loadAttachment(id) {
        _g.apiPost('/company/selectattachResume.do', { jrrId: id })
          .then(res => {
            console.log('load attachment', id, res)
            if (res) {
              if (res.status === 0) {
                this.msg = '下载附件简历'
                this.href = res.data
              } else if (res.status === 1) {
                this.msg = '暂无附件简历'
                this.href = null
              }
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
    .attachment-root {

        width: 100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        /*margin-top: 30px;*/

        @mixin comm-background {
            width: 240px;
            height: 40px;
            background: #009944;
            color: #fff;
            border: 1px solid #009944;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        a {
            @include comm-background;

            text-decoration: none;

            &:hover {
                color: #fff;
            }

            &:visited {
                color: #fff;
            }

        }

        p {
            @include comm-background;
        }
    }
</style>
